<template>
	<view class="template-music">

		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 新消息 -->
				<view class="custom-nav__back">
					<text @click="goBack" class='tn-icon tn-icon-left'></text>
					<text @click="goHome" class='tn-icon tn-icon-home-capsule-fill'></text>
				</view>
				<!-- 搜索框 -->
				<view @click="toSearch" class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center ">
					<view
						class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-color-gray--dark tn-bg-gray--light">
						<view class="custom-nav__search__icon tn-icon-search"></view>
						<view class="custom-nav__search__text tn-padding-right">{{keyword!=''?keyword:'点我搜索呀！'}}</view>
					</view>
				</view>
			</view>
		</tn-nav-bar>
	
		<unicloud-db ref="udb" orderby="date desc" v-slot:default="{data, loading, error, options}"
					 :collection="colList"
					 :page-size="10"
					 @load="onqueryload" @error="onqueryerror">
		  <!-- 报错提示 -->
		  <view  v-if="error" class="tn-margin tn-padding tn-flex tn-flex-direction-column" style="margin-top: 200rpx;">
		  	<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8059ac71-13c5-4a15-bec8-3ac9f98f0840/808c1372-a325-429a-88ff-c78817250519.png" mode="aspectFill"></image>
		  	<text class="tn-text-bold tn-color-indigo tn-text-center tn-text-shadow-indigo">{{error.message}}</text>
		  </view>
		  
		  <view v-else>
		    <view class="">
		    	<view class="tn-flex tn-flex-row-between">
		    		<view class="justify-content-item tn-margin-left tn-text-bold tn-text-xxl">
		    			文章
		    		</view>
		    	</view>
		    	<!-- 文章栏开始 -->
		    	<!-- 内容 -->
		    	<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom">
		    		<!-- 图文信息 -->
		    		<block v-for="(item,index) in data" :key="item.id">
		    			<view class="blogger__item tn-shadow" @click.stop="toDetail(item._id)">
		    				<view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
		    					<view class="justify__author__info">
		    						<view class="tn-flex tn-flex-row-center">
		    							<view class="tn-flex tn-flex-row-center tn-flex-col-center">
		    								<view class="tn-padding-right tn-text-ellipsis">
		    									<view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">
		    										{{ item.title }}
		    									</view>
		    									<view
		    										class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">
		    										{{ item.date }}
		    									</view>
		    								</view>
		    							</view>
		    						</view>
		    					</view>
		    				</view>
		    
		    				<view v-if="item.excerpt" class="blogger__content" :id="`blogger__content--${index}`">
		    					<view class="blogger__content__data"
		    						:style="{height: `${item.contentContainerInit ? (!item.showAllContent ? contentHideShowHeight : item.contentContainerHeight) + 'px' : 'auto'}`}">
		    						{{ item.excerpt }}
		    					</view>
		    					<view v-if="item.hideContent" class="blogger__content__status"
		    						@tap="switchResultShowStatus(index)">{{ item.showAllContent ? '收起' : '全文'}}</view>
		    				</view>
		    
		    				<block v-show="item.avatar">
		    					<image
		    						class="blogger__main-image tn-shadow-blur blogger__main-image--1 tn-margin-bottom-sm"
		    						:src="item.avatar" mode="aspectFill">
		    					</image>
		    				</block>
		    			</view>
		    		</block>
		    	</view>
		    	<!-- 成果栏结束 -->
		    </view>
		    <!-- 文章结束 -->
			<!-- 内容为空提示 -->
			<view  v-if="!loading&&data.length==0" class="tn-margin tn-padding tn-flex tn-flex-direction-column" style="margin-top: 200rpx;">
				<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8059ac71-13c5-4a15-bec8-3ac9f98f0840/808c1372-a325-429a-88ff-c78817250519.png" mode="aspectFill"></image>
				<text class="tn-text-bold tn-color-indigo tn-text-center tn-text-shadow-indigo">未检索到相关内容！</text>
			</view>
			<!-- 加载提示 -->
			<view v-if="loading" class="tn-flex">
				<view class="tn-flex-3 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
				<tn-loading mode="circle" color="#00a6ff" :size=60 :show="true"></tn-loading>
				<view class="tn-flex-3 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
			</view>
		  </view>
		</unicloud-db>
		
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
	import day from 'tuniao-ui/day.js'
	const db = uniCloud.database()
	const dbCmd = db.command
	const bannercollection   = db.collection('opendb-banner')
	const collection 		 = db.collection('opendb-news-articles')
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
import resultVue from './result.vue'
	export default {
		name: 'List',
		mixins: [template_page_mixin],
		components: {
			NavIndexButton
		},
		data() {
			return {
				day:day, // 时间戳处理
				defaultbanner: [],
				value: '', // 评论内容
				listIndex: 0, // 评论第几条笔记
				passive: {}, // 被回复人的信息
				is_pinglun: false, // 是否显示评论输入框
				unread: 0, // 未读消息通知数
				ended: false, //true的时候没有更多数据
				comment_type:0,// 0表示回复文章
				where: '"status" == true ',//默认过滤
				keyword: "",//搜索关键字
			}
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			},
			colList(){
				return [
					db.collection('opendb-news-articles').where(
					dbCmd.and({article_status:1},dbCmd.or([
					{title: new RegExp(this.keyword, 'gi')}, 
					{content: new RegExp(this.keyword, 'gi')}, 
					{excerpt: new RegExp(this.keyword, 'gi')}]))
					).field('_id,user_id,title,content,excerpt,article_status,avatar,publish_date').getTemp(),
					db.collection('uni-id-users').field('_id,nickname,username,avatar_file').getTemp()
				]
				
			}

		},
		async onShow() {
			this.keyword = getApp().globalData.searchText
			getApp().globalData.searchText = ''
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				// 停止下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() { //滚动到底翻页
			this.$refs.udb.loadMore()
		},
		methods: {
			...mapMutations({
				setUserInfo: 'user/login'
			}),
			goBack(){
				uni.navigateBack({
					
				})
			},
			goHome(){
				uni.switchTab({
					url:'/pages/list/list'
				})
			},
			onqueryload(data, ended, pagination) {
				// 可在此处预处理数据，然后再渲染界面
				// ended为true时候没有更多数据
				this.ended = ended
				// 提醒用户没有更多数据
				if(ended==true){
					uni.showToast({
						title: '没有更多数据了！',
						icon: 'none'
					})
				}
			},
			onqueryerror(e) {
			// 加载数据失败
			},
			
			
			// 查看详情
			toDetail(_id) {
				uni.navigateTo({
					url: '/pages/list/detail?uid='+_id,
					animationType: 'fade-in'
				})
			},
			// 查看用户主页
			toUser(info) {
				var _id = info.uid[0]._id;
				uni.navigateTo({
					url: '/pages/list/user/otheruser?_id=' + _id,
					animationType: 'fade-in'
				})
			},
			// 跳转到搜索
			toSearch(){
				uni.navigateTo({
					url:'/pages/list/search/search'
				})
			},

			// 预览图片
			TanPreviewImage(ImageList, index) {
				let photoList = ImageList.map(item => {
					return item.url;
				});
				uni.previewImage({
					current: index,
					urls: photoList,
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	.template-music {
		margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);
		;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
		  width: 160rpx;
		  height: 65rpx;
		  margin-left: 20rpx;
		  position: relative;
		  display: flex;
		  justify-content: space-evenly;
		  align-items: center;
		  box-sizing: border-box;
		  background-color: rgba(0, 0, 0, 0.15);
		  border-radius: 1000rpx;
		  border: 1rpx solid rgba(255, 255, 255, 0.5);
		  color: #FFFFFF;
		  font-size: 18px;
		  .icon {
		    display: block;
		    flex: 1;
		    margin: auto;
		    text-align: center;
		  }
		  &:before {
		    content: " ";
		    width: 1rpx;
		    height: 110%;
		    position: absolute;
		    top: 22.5%;
		    left: 0;
		    right: 0;
		    margin: auto;
		    transform: scale(0.5);
		    transform-origin: 0 0;
		    pointer-events: none;
		    box-sizing: border-box;
		    opacity: 0.7;
		    background-color: #FFFFFF;
		  }
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
				background-color: rgba(255, 255, 255, 0.2);
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {}
		}
	}

	/* 自定义导航栏内容 end */

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8059ac71-13c5-4a15-bec8-3ac9f98f0840/7970ea48-19eb-486c-8c2d-399758de567d.png);


				}
			}
		}
	}

	/* 文章内容 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;
			margin: 10rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #82B2FF;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			&--1 {
				max-width: 710rpx;
				min-width: 710rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}
			
			&--2 {
				max-width: 280rpx;
				max-height: 280rpx;
			}
			
			&--3 {
				height: 230rpx;
				width: 230rpx;
			}
		}

		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}
	}

	.image-music {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	/* 文章内容 end*/

	
	/* 图标容器10 start */
	  .icon10 {
	    &__item {
	      width: 30%;
	      background-color: #FFFFFF;
	      border-radius: 10rpx;
	      padding: 30rpx;
	      margin: 20rpx 10rpx;
	      transform: scale(1);
	      transition: transform 0.3s linear;
	      transform-origin: center center;
	      
	      &--icon {
	        width: 84rpx;
	        height: 65rpx;
	        font-size: 55rpx;
	        border-radius: 150rpx;
	        margin-bottom: 0rpx;
	        position: relative;
	        z-index: 1;
	        
	        &::after {
	          content: " ";
	          position: absolute;
	          z-index: -1;
	          width: 100%;
	          height: 100%;
	          left: 0;
	          bottom: 0;
	          border-radius: inherit;
	          opacity: 1;
	          transform: scale(1, 1);
	          background-size: 100% 100%;
	          background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8059ac71-13c5-4a15-bec8-3ac9f98f0840/7970ea48-19eb-486c-8c2d-399758de567d.png);
	        }
	      }
	    }
	  }
	/* 图标容器10 end */
	/* 文章内容 start*/
	.blogger {
		&__item {
			padding: 30rpx;
		}
	
		&__author {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}
	
		&__desc {
			line-height: 55rpx;
	
			&__label {
				padding: 0 20rpx;
				margin: 0rpx 18rpx 0 0;
	
				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}
	
			&__content {}
		}
	
		&__content {
			margin-top: 18rpx;
			padding-right: 18rpx;
	
			&__data {
				line-height: 46rpx;
				text-align: justify;
				overflow: hidden;
				transition: all 0.25s ease-in-out;
			}
	
			&__status {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: $tn-main-color;
			}
		}
	
		&__main-image {
			border-radius: 16rpx;
	
			&--1 {
				max-width: 80%;
				max-height: 300rpx;
			}
	
			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}
	
			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}
	
		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}
	
		&__ad {
			width: 100%;
			height: 500rpx;
			transform: translate3d(0px, 0px, 0px) !important;
	
			::v-deep .uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}
	
			.uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}
	
			&__item {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-origin: left center;
				transform: translate3d(100%, 0px, 0px) scale(1) !important;
				transition: transform 0.25s ease-in-out;
				z-index: 1;
	
				&--0 {
					transform: translate3d(0%, 0px, 0px) scale(1) !important;
					z-index: 4;
				}
	
				&--1 {
					transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
					z-index: 3;
				}
	
				&--2 {
					transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
					z-index: 2;
				}
			}
	
			&__content {
				border-radius: 40rpx;
				width: 640rpx;
				height: 500rpx;
				overflow: hidden;
			}
	
			&__image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	/* 文章内容 end*/
</style>
